<template>
  <a-card :body-style="{ padding: 0 }">
    <div>
      <a-button key="1" type="primary" @click="handleAdd" style="margin-right: 10px;" :disabled="addbuttonstate">
        新增
      </a-button>
      <a-dropdown style="margin-right: 10px;" :disabled="referbuttonstate">
        <a-menu slot="overlay" @click="hanleRefer">
          <a-menu-item key="1">参照采购计划 </a-menu-item>
          <a-menu-item key="2">参照销售订单</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 参照 <a-icon type="down" /> </a-button>
      </a-dropdown>
      <a-button key="2" type="primary" @click="handleAdd" style="margin-right: 10px;" :disabled="canclebuttonstate">
        取消
      </a-button>
      <a-button key="3" type="primary" @click="handleOk" :disabled="savebuttonstate" style="margin-right: 10px;">
        保存
      </a-button>
      <a-button key="4" type="primary" @click="handleAddSubmit" :disabled="submitbuttonstate"
        style="margin-right: 10px;">
        提交
      </a-button>
      <a-button key="5" type="primary" @click="handleDel" :disabled="deletebuttonstate" style="margin-right: 10px;">
        删除
      </a-button>
      <a-button key="6" type="primary" @click="handleDel" :disabled="changebuttonstate" style="margin-right: 10px;">
        变更
      </a-button>
      <a-button key="7" type="primary" @click="handleEdit" :disabled="editbuttonstate" style="margin-right: 10px;">
        编辑
      </a-button>
      <a-dropdown style="margin-right: 10px;" :disabled="printbuttonstate">
        <a-menu slot="overlay" @click="handlePrintWithModelId">
          <a-menu-item key="po">打印Pdf </a-menu-item>
          <a-menu-item key="2">excel导出</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 打印 <a-icon type="down" /> </a-button>
      </a-dropdown>
      <a-dropdown style="margin-right: 10px;" :disabled="auditbuttonstate">
        <a-menu slot="overlay" @click="handleAddPost">
          <a-menu-item key="2">审批通过 </a-menu-item>
          <a-menu-item key="3">审批不通过</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 审批 <a-icon type="down" /> </a-button>
      </a-dropdown>

      <!-- <a-page-header :ghost="false" title="采购订单制单">
        <template slot="extra">
          <a-button key="3" type="primary" @click="handleOk" :disabled="formDisabled">
            保存
          </a-button>
          <a-button key="2" type="primary" :disabled="formDisabled">
            提交审核
          </a-button>
          <a-button key="1" type="primary" :disabled="formDisabled">
            取消审核
          </a-button>
        </template>
</a-page-header> -->
      <img v-if="model.status == '0' || model.status == undefined" width="60" height="40" src="~@/assets/zhidan.png"
        style="float: right; " />

      <img v-if="model.status == '1'" width="60" height="40" src="~@/assets/shenpizhong.png" style="float: right; " />
      <img v-if="model.status == '2'" width="60" height="40" src="~@/assets/tongguo.png" style="float: right; " />
      <img v-if="model.status == '3'" width="60" height="40" src="~@/assets/weitongguo.png" style="float: right; " />
    </div>
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span='6'>
              <a-form-model-item label="任务编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billcode">
                <a-input v-model="model.billcode" placeholder="请输入任务编号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="任务名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subject">
                <a-input v-model="model.subject" placeholder="请输入任务名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="任务分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskcate">
                <!-- <a-input v-model="model.taskcate" placeholder="请输入任务名称"></a-input> -->

                <j-search-select-tag v-model="model.taskcate" placeholder="请输入任务分类"
                  dict="projecttaskcate,name,id"></j-search-select-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="所属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectid">
                <!-- <a-input v-model="model.projectid" placeholder="请输入所属项目"></a-input> -->
                <j-search-select-tag v-model="model.projectid" dict="project,name,id"></j-search-select-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="上级任务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parenttaskid">
                <a-input v-model="model.parenttaskid" placeholder="请输入上级任务"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assignedto">
                <!-- <a-input v-model="model.assignedto" placeholder="请输入负责人"></a-input> -->
                <!-- <c-select-user v-model="model.assignedto" :buttons="false"></c-select-user> -->
                <j-select-multi-user v-model="model.assignedto"></j-select-multi-user>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startdate">
                <j-date placeholder="请选择开始日期" v-model="model.startdate" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enddate">
                <j-date placeholder="请选择结束日期" v-model="model.enddate" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="任务标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tags">
                <!-- <a-input v-model="model.tags" placeholder="请输入任务标签"></a-input> -->
                <template v-for="(tag, index) in tags">
                  <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                    <a-tag color="pink" :key="tag" :closable="index == 0" @close="() => handleClose(tag)">
                      {{ `${tag.slice(0, 20)}...` }}
                    </a-tag>
                  </a-tooltip>
                  <a-tag color="pink" v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
                    {{ tag }}
                  </a-tag>
                </template>
                <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
                  :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
                  @keyup.enter="handleInputConfirm" />
                <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                  <a-icon type="plus" /> New Tag
                </a-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="任务进度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="progress">

                <a-input-number v-model:value="model.progress" :min="0" :max="100" :formatter="value => `${value}%`"
                  :parser="value => value.replace('%', '')" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="任务分类描述" :key="refKeys[0]" :forceRender="true">
          <projecttaskitem-form ref="projecttaskitemForm" @validateError="validateError"
            :disabled="formDisabled"></projecttaskitem-form>
        </a-tab-pane>

      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>

import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import ProjecttaskitemForm from './ProjecttaskitemForm.vue'

export default {
  name: 'ProjecttaskForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
    ProjecttaskitemForm,
  },
  data () {
    return {
      objectcode: "projecttask",
      tags: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      inputVisible: false,
      model: {
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
      },
      refKeys: ['projecttaskitem',],
      tableKeys: [],
      activeKey: 'projecttaskitem',
      // 任务分类描述
      projecttaskitemTable: {
        loading: false,
        dataSource: [],
        columns: [
        ]
      },
      url: {
        add: "/project.projecttask/projecttask/add",
        edit: "/project.projecttask/projecttask/edit",
        queryById: "/project.projecttask/projecttask/queryById",
        projecttaskitem: {
          list: '/project.projecttask/projecttask/queryProjecttaskitemByMainId'
        },
      }
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled () {
      return this.disabled
    },
  },
  created () {
  },
  methods: {

    addBefore () {
      this.$refs.projecttaskitemForm.clearFormData()
    },
    getAllTable () {
      return new Promise(resolve => {
        resolve([]);
      })
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter () {
      this.$nextTick(() => {
        this.$refs.projecttaskitemForm.initFormData(this.url.projecttaskitem.list, this.model.id)
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
      }

      if (this.model.id) {
        let orgtags = this.model.tags;
        if (orgtags != null && orgtags != undefined && orgtags != "") {
          this.tags = orgtags.split(',');
        } else {
          this.tags = [];
        }
      }
      // this.model = getAction(this.url.queryById, { id: record.id })
      // this.visible = true;
      this.formstatus = '2';
      this.disabled = false;

    },
    //校验所有一对一子表表单
    validateSubForm (allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([
          this.$refs.projecttaskitemForm.validate(0),
        ]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_FAILED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** 整理成formData */
    classifyIntoFormData (allValues) {
      this.model.tags = this.tags.join(',');
      let main = Object.assign(this.model, allValues.formValue)

      return {
        ...main, // 展开
        projecttaskitemList: this.$refs.projecttaskitemForm.getFormData(),
      }
    },
    validateError (msg) {
      this.$message.error(msg)
    },

  }
}
</script>

<style scoped></style>